Project Browser
This guide explores the key features of the Project Browser and how to use it efficiently.
What is the Project Browser?
The Project Browser is a panel in LiveCode Create that allows you to:
- View and navigate through your app's layouts and components, where a component is a widget or a responsive container.
- Manage the structure of your app through a clear, hierarchical tree view.
- Select, duplicate, reorder, or group pre-existing components.
- Edit properties, actions, or the script associated with a layouts and component.
- Create new layouts directly from the Project Browser.
It's an essential tool for keeping track of your app's layouts and components as your project grows.
Accessing the Project Browser
The Project Browser is located on the left-hand side of the App Building Environment:
- Open your project in LiveCode Create.
- Click on the Project Browser Icon in the left toolbar to open it.
Key Features of the Project Browser
1. Hierarchical Tree View
The Project Browser shows your app's structure in a tree view, with items organized as follows:
- Layouts: Represent individual screens or pages in your app.
- Containers: Group related widgets together for better organization.
- Widgets: Individual elements like buttons, input fields, or other widgets.
You can:
- Expand/Collapse sections to focus on specific parts of your app.
- Reorder Components by dragging and dropping them into a new position.
Example: A layout containing a container with two button widgets.
2. Selecting and Editing Layouts and Components
- Select Layouts and Components: Click on a layout or component in the Project Browser to select it. It will also be highlighted in the Canvas Area.
- Edit Properties: Then you can use the Property Inspector to adjust visual properties, data bindings, or behaviors for the selected layout or component.
- Edit Actions or Script: Right-click on a layout or component and select Edit Actions or Edit Script to modify its logic.
Tip: Use Actions to give your app's layouts and components functionality without writing code. Learn more about Actions.
3. Duplicating and Grouping Components
The Project Browser allows you to duplicate components or group them into containers:
- Duplicate Components:
- Right-click on an existing widget or container and select Duplicate to make a copy.
- Group Components:
- Select multiple pre-existing widgets, right-click, and choose Group to put them into a new container.
4. Managing Layouts
Layouts represent individual screens or pages in your app. The Project Browser allows you to create, rename, and manage layouts efficiently:
- Create a New Layout: Click the Plus (+) Icon at the top of the Project Browser to add a new layout.
- Rename Layouts: Right-click on an existing layout and select Rename.
- Switch Between Layouts: Click on a layout name to open it in the Canvas Area.
5. Reordering and Organizing Components
To better organize your project, you can click and drag items in the Project Browser to reorganise them how you want. Items can also be moved to and from layouts/containers by dragging them to the appropriate place in the hierarchical tree.
Tips for Using the Project Browser
- Name Components Clearly: Rename widgets, containers, and layouts for easier navigation.
- Use Grouping: Group widgets into containers to keep your layout organized.
- Edit Actions and Scripts: Right-click on components to access their action or script editors quickly.
- Organize as You Go: Use drag-and-drop to keep your layout tree clean and well-structured.
For further learning: